随着node 7.6.0正式实装async/await函数,js的异步编程变的比以往更加容易。但是,在我们全面投入async/await的怀抱之前,有必要对这个特性做一些细致的了解。
书写形式
基本上,任何一个函数都可以成为async
函数,以下都是合法的书写形式:
函数声明
async function foo () {}
函数表达式
const foo = async function () {}
方法定义
const obj = { async foo () {} }
箭头函数
async () => {}
async
函数总是返回Promise
即使返回值只是一个primitive值,async
函数也会通过return
自动将返回值包装成一个Promise
对象返回。
因此,下面两组函数是等价的。
正常 (Fulfill)
// async函数
async function foo () {
return 'a'
}
// Promise
function foo () {
return Promise.resolve('a')
}
异常 (Reject)
// async函数
async function foo () {
throw new Error('error')
}
// Promise
function foo () {
return Promise.reject(new Error('error'))
}
注意:当返回值本身就是一个
Promise
对象时,async
函数的return
并不会对返回值进行二次包装。
await
总是按顺序执行
使用async
函数之前,我们还得搞清楚它的运行机制。尤其是在执行顺序上,完全用同步的思维也许并不适用于async
函数。
考虑下面的代码
function asyncGet (x) {
return new Promise(resolve => setTimeout(() => {
console.log('a')
resolve(x)
}, 500))
}
async function test () {
console.log('b')
const x = 3 + 5
console.log(x)
const a = await asyncGet(1)
console.log(a)
const b = await asyncGet(2)
console.log(b)
console.log('c')
return a + b
}
const now = Date.now()
console.log('d')
test().then(x => {
console.log(x)
console.log(`elapsed: ${Date.now() - now}`)
})
console.log('f')
async
函数和普通函数一样按顺序执行,同时,在执行到await
语句时,返回一个Promise
对象await
可以理解为将async
函数挂起,直到等待的Promise
被fulfill或者reject,再继续执行之后的代码async
函数的返回值和普通Promise
没有区别
因此,上面代码输出应该是
d
b
8
f
a
1
a
2
c
3
elapsed: 1010
注意 d 和 f 中间的输出
让我们再来看一个混合了Promise的版本。
function asyncGet (x) {
return new Promise(resolve => setTimeout(() => {
console.log('a')
resolve(x)
}, 500))
}
async function test () {
console.log('b')
const x = 3 + 5
console.log(x)
const [a, b] = await Promise.all([
asyncGet(1),
asyncGet(2)
])
console.log('c')
return a + b
}
const now = Date.now()
console.log('d')
test().then(x => {
console.log(x)
console.log(`elapsed: ${Date.now() - now}`)
})
console.log('f')
输出结果
d
b
8
f
a
a
c
3
elapsed: 509
注意到elapsed
的差别了吗?这就是为什么我们说await
总是顺序执行的。不同的await之间无法并行执行,想要真正的完全异步还得借助类似Promise.all
这样的方法。
async函数和callback
await
只能能影响直接包裹它的async
函数。因此在callback函数中的await
并不会挂起整个async
函数的执行。
一种常见的错误
async function getAll (vals) {
return vals.map(v => await asyncGet(v))
}
这段代码有语法错误,await
并不在async
函数内部。如果给map
的callback加上async
呢?
async function getAll (vals) {
return vals.map(async v => await asyncGet(v))
}
这段代码虽然能执行,但还有两个问题。
返回一个
Promise
对象的数组,并不是我们期待的value数组await
只会暂停map
的callback,因此map
完成时,不能保证asyncGet
也全部完成
正确的写法还得借助Promise.all
async function getAll (vals) {
return Promise.all(vals.map(v => asyncGet(v)))
}
总结
从上我们可以看出,Promise
是async
函数的基础,想要愉快的使用async
函数,必须对Promise
有比较深入的理解。甚至一些常见的任务,仅仅依靠async
函数无法实现。
希望大家看完本文后能对async
函数有个更全面的认识,这样使用起来才会更加顺手。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。